<template>
  <main>
    <masthead
      :page="page"
      :imgUrl="blog.firstPicture" 
      :pageTitle="pageTitle"
    ></masthead>
    <article>
      <Row>
        <Col :xs="24" :sm="24" :md="24" :lg="17" :xl="17">
          <detail 
            :blog="blog"
            :type="type"
            :shareStatement="blog.shareStatement"
            :appreciation="blog.appreciation"
            :commentabled="blog.commentabled"
            :allowedLinkList="allowedLinkList"
            @applyLink="applyLink"
          ></detail>
        </Col>
        <right-module></right-module>
      </Row>
    </article>
    <Drawer
      title="友链申请"
      v-model="modal"
      width="360"
    >
      <Form ref="formValidate" :model="formValidate" :rules="ruleValidate">
        <FormItem prop="name">
          <Input v-model="formValidate.name" placeholder="* 网站名称..."></Input>
        </FormItem>
        <FormItem prop="description">
          <Input v-model="formValidate.description" placeholder="网站描述..."></Input>
        </FormItem>
        <FormItem prop="url">
          <Input v-model="formValidate.url" placeholder="* 网站地址..."></Input>
        </FormItem>
        <FormItem prop="picture">
          <Input v-model="formValidate.picture" placeholder="* 网站图片链接..."></Input>
        </FormItem>
      </Form>
      <div class="drawer-footer">
        <Button style="margin-right: 8px" @click="reset('formValidate')">重置</Button>
        <Button type="primary" @click="beforeConfirm('formValidate')">提交</Button>
      </div>
    </Drawer>
  </main>
</template>

<script>
import {
  findBlogDetail,
  findAllowedLinkList,
  saveLink
} from 'service'

export default {
  name: 'Link',
  data() {
    return {
      pageTitle: '友链',
      page: 1,
      blog: {},
      type: {},
      allowedLinkList: [],
      modal: false,
      formValidate: {
        name: '',
        description: '',
        url: '',
        picture: '',
      },
      ruleValidate: {
        name: [
          { required: true, message: '网站名称不能为空', trigger: 'blur' }
        ],
        url: [
          { required: true, message: '网站地址不能为空', trigger: 'blur' }
        ],
        picture: [
          { required: true, message: '图片地址不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.getLink()
    this.getLinkList()
  },
  methods: {
    async getLink() {
      let res = await findBlogDetail(2)
      if (res.data.statusCode === 200) {
        this.blog = res.data.data
        this.type = res.data.data.type
      } else {
        this.$router.push({ name: 'error' })
      }
    },
    async getLinkList() {
      let res = await findAllowedLinkList()
      if (res.data.statusCode === 200) {
        this.allowedLinkList = res.data.data
      } else {
        this.$router.push({ name: 'error' })
      }
    },
    async confirm(link) {
      let res = await saveLink(link)
      if (res.data.statusCode === 200) {
        this.$Message.success('申请成功!')
        this.modal = false
      } else {
        this.$Message.error('Fail!')
      }
    },
    beforeConfirm(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          let link = {
            name: this.formValidate.name,
            description: this.formValidate.description,
            url: this.formValidate.url,
            picture: this.formValidate.picture
          }
          this.confirm(link)
        } else {
          this.$Message.error('Fail!')
        }
      })
    },
    reset(name) {
      this.$refs[name].resetFields()
    },
    applyLink() {
      this.modal = true
    }
  },
  watch: {
    $route(to, from) {
      if(to.name === 'link') {
        this.getLink()
        this.getLinkList()
      }
    }
  },
  components: {
    "right-module": () => import("components/homePage/RightModule"),
    "masthead": () => import("components/masthead/Masthead"),
    "detail": () => import("components/common/Detail")
  }
}
</script>

<style lang="scss" scoped>
main {
  max-width: 100%;
  margin: 0 auto;
  &>article {
    position: relative;
    max-width: 1180px;
    margin: 20px auto 0;
  }
}
</style>
<style lang="scss">
.drawer-footer{
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
}
</style>